<template>
    <input type="text" v-model="keyWord" />
    <h1>{{ keyWord }}</h1>
</template>

<script>
import { customRef, ref } from "vue";
export default {
    name: "App",
    setup() {
        function myRef(value,delay ) {
            let timer;
            return customRef((track, trigger) => {
                return {
                    get() {
                        console.log(`我读取了 修改值为: ${value}`);
                        track(); //通知vue追踪value的变化
                        return value;
                    },
                    set(newValue) {
                        console.log(`我修改了 修改值为: ${value}`);
                        clearTimeout(timer);
                        timer = setTimeout(() => {
                            value = newValue;
                            trigger(); //通知vue更新模板
                        }, delay);
                    },
                };
            });
        }
        let keyWord = myRef("wda",500);
        return { keyWord };
    },
};
</script>

<style>
</style>
